@use "sass:string";
@use "@react-md/core" with (
  $font-family: string.unquote("Arial, Verdana, Tahoma, sans-serif"),
  // these are the default font weights
  $font-weight-thin: 100,
  $font-weight-light: 300,
  $font-weight-regular: 400,
  $font-weight-medium: 500,
  $font-weight-bold: 700,
  $font-weight-semi-bold: 800,
  $font-weight-black: 900,
  $base-custom-font-styles: (
    // applies to all `.rmd-typography` classes
    // values will be overridden by the `-custom-styles`
    margin: 1.25em 0 0.5em,
  ),
  $headline-1-custom-styles: (
    font-size: 3rem,
    margin: 0 0 1em,
  ),
  $headline-2-custom-styles: (
    font-size: 2.875rem,
  ),
  $headline-3-custom-styles: (
    font-size: 2.825rem,
  ),
  $headline-4-custom-styles: (),
  $headline-5-custom-styles: (),
  $headline-6-custom-styles: (),
  $subtitle-1-custom-styles: (),
  $subtitle-2-custom-styles: (),
  $body-1-custom-styles: (
    margin: 1em 0,
  ),
  $body-2-custom-styles: (
    margin: 1em 0,
  ),
  $caption-custom-styles: (),
  $overline-custom-styles: ()
);

// this is only required for this demo. In your application, this should just be the normal:
// @include core.styles;
.container {
  :global {
    @include core.typography-base-styles($disable-layer: true);
  }
}
